import React, { useEffect, useState } from "react";
import "./style.css";
import { Card, Select, Input, Button, Table, message } from "antd";
import { getConsultList } from "../../../store/consult";
import { ConsultType, ColumsType, StoreStateType } from "../../../interface";
import { useSelector } from "react-redux";
import { apiConsultDel } from "../../../api";

const { Option } = Select;

const Consult = () => {
  // 所有数据
  const consultData = useSelector(
    (state: StoreStateType) => state.PublicReducer.consultList
  );

  //删除
  const handleDelete = (id: number) => {
    apiConsultDel({ id }).then((res: any) => {
      if (res.code === 200) {
        message.success(res.mess);
        getConsultList();
      }
    });
  };

  const consultColumns: ColumsType[] = [
    {
      title: "序号",
      width: 150,
      dataIndex: "id",
      key: "id",
      fixed: "left",
    },
    {
      title: "文章标题",
      dataIndex: "tit",
      width: 200,
      key: "tit",
    },
    {
      title: "创建人",
      dataIndex: "name",
      width: 200,
      key: "name",
    },
    {
      title: "创建日期",
      dataIndex: "date",
      width: 200,
    },
    {
      title: "状态",
      width: 200,
    },
    {
      title: "操作",
      fixed: "right",
      width: 350,
      render: (v: ConsultType) => {
        return (
          <div style={{ display: "flex" }}>
            <Button type="link">
              编辑
            </Button>
            <Button type="link" onClick={() => handleDelete(v.id)}>
              删除
            </Button>
          </div>
        );
      },
    },
  ];

  useEffect(() => {
    // 获取列表数据
    getConsultList();
  }, []);

  const [value, setValue] = useState("");
  const changeType = (value: string) => {
    setType(value);
  };
  const [type, setType] = useState("");
  // 搜索
  const searchTable = () => {
    getConsultList({
      value,
      type,
    });
  };

  return (
    <div className="consultbox">
      <Card style={{ width: 1670 }}>
        <div className="consultsanji">
          <div>
            <span>状态：</span>
            <Select value={type} style={{ width: 180 }} onChange={changeType}>
              <Option value="开启">开启</Option>
              <Option value="关闭">关闭</Option>
              
            </Select>
          </div>

          <div className="consultinp">
            <span>搜索</span>
            <Input
              placeholder="请输入名称"
              style={{ width: 300 }}
              value={value}
              onChange={(e) => setValue(e.target.value)}
            ></Input>
          </div>

          <div>
            <Button type="primary" style={{ width: 200 }} onClick={searchTable} className='consultss'>
              搜索
            </Button>

            <Button type="primary" style={{ width: 200 }} className="consultxinzen">
              新增
            </Button>
          </div>
        </div>
      </Card>

      <Card style={{ width: 1670 }} className="consultbody">
        <Table
          columns={consultColumns}
          dataSource={consultData}
          className="consulttab"
        />
      </Card>
    </div>
  );
};
export default Consult;
